<style scoped>
  .layout{
    border: 1px solid #d7dde4;
    /* background: #f5f7f9; */
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    height: 100%;
  }
  .layout-logo{
    width: 200px;
    line-height: 40px;
    height: 40px;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
    font-weight: bold;
    text-align: center;
    color: beige;
    font-size: 20px;
    align-content: center;
  }
  .layout-nav{
    width: 590px;
    margin: 0 auto;
    margin-right: 10px; 
  }
    .layout-nav a{
        color: antiquewhite;
    }
  .content-center{
        width: 100%;
        height: 40px;
        line-height: 40px;
        margin: 0 auto;
        margin-top: 10px;
        background: #f5f7f9;
        text-align: center; 
        font-size: 15px;
  }
    .row-a a{
        color: rgb(0, 20, 100);
    }

    .content-nav{
        width: 1000px;
        /* height: 2000px; */
        margin: 0 auto;
        /* border: 1px red solid; */
        
    }
    .content-nav-left{
        width: 100%;
        float: left;
        margin-top: 20px;
        
    }
    /* .content-nav-right{
        width: 68%;
        float: right;
        position: relative;
        margin-top: 20px;
        margin-left: 10px;
    } */
    .icon_right{
        margin-right: 2px;
        color:yellowgreen;
        
    }
    .content-nav-top{
        width: 100%;

        /* border: 1px red solid; */
        /* text-align: center; */
    }
    .content-nav-top img{
        width: 100%;
        height: 350px;
    }
    .carousel-title{
        width: 100%;
        height: 50px;
        line-height: 50px;
        border-bottom: 0.5px lightsteelblue solid;
        /* font-size: 15px; */
        /* font-family: '黑体'; */
        /* font-weight:initial; */
        /* border-radius: 10%; */
    }
    .carousel-nav{
        width: 100%;
        /* height: 150px; */
        margin-top: 10px;
        border-bottom: 1px solid lightsteelblue;
    }
    .cn-row{
        margin-top: 20px;
    }
  .layout-footer-center{
      border: 1px solid #d7dde4;
      background-color: #d7dde4;
    text-align: center;
    margin-top: 20px;
  }
  .zixun{
        /* border-: 1px solid lightsteelblue; */
        margin: 0 auto;
        text-align: center
  }
</style>

<template>
    <div class="layout">
        <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark" active-name="1" >
                    <div class="layout-logo">游戏资讯分享平台</div>
                    <div class="layout-nav">
                         <MenuItem name="1">
                            <a @click="Home('Home')">头条</a>
                        </MenuItem>
                        <MenuItem name="2">
                            <a @click="SportsCircle('sportsClick')" >资讯社区</a>
                        </MenuItem>
                        <MenuItem name="3">
                            <a @click="Team('Team')">游戏库</a>
                        </MenuItem>
                        <MenuItem name="4">
                            <a  @click="MyTieZi('MyTieZi')" >我的资讯</a>
                        </MenuItem>
                        <MenuItem name="5">
                            <a @click="TableMain('TableMain')">关于我</a>
                        </MenuItem>
                         <MenuItem name="6">
                            <a @click="adminOut('adminOut')" style="color:red">退出登录</a>
                        </MenuItem>
                    </div>
                </Menu>
            </Header>

            <content :style="{padding:'0 50px'}">
             
               <div class="content-nav">
                    <div class="content-nav-left">
                        <Card style="width:100%" :key="index" v-for="(item,index) in zhuanqudate">
                            <p slot="title">最新<a>{{item.zname}}</a>资讯专区</p>
                            <row>
                                <i-col span="24">{{item.sportscircle.sname}}:{{item.sportscircle.scontext}}</i-col>
                            </row>
                        </Card>
                    </div>
               </div>

            </content>


            <Footer class="layout-footer-center">2019-2020 &copy; TalkingData</Footer>
        </Layout>
    </div>
</template>

<script>
//右侧商品
import axios from 'axios'
    export default {
         inject:["reload"],
        data () {
            return {
                zhuanqudate:[]
            }
        },
        methods: {
            SportsCircle(){
                this.$router.push({
                path: `/SportsCircle/` })
            },
            MyTieZi(){
                this.$router.push({
                path: `/MyTieZi/` })
            },
            Team(){
                this.$router.push({
                path: `/Team/` })
            },
            TableMain(){
                this.$router.push({
                path: `/TableMain/` })
            },
            adminOut(){
                sessionStorage.clear();
                this.$router.push({
                path: `/ManagerLogin` })
            },
            Home(){
                sessionStorage.clear();
                this.$router.push({
                path: `/Home` })
            }
        }, created(){  
            this.$ajax('http://localhost:8081/ZhuanQuIndexNumFindAll').then(res=>{
                this.zhuanqudate = res.data
                console.log(this.zhuanqudate);
            }).catch(function (error){
                console.log(error);
            });
        }
    }
</script>